<template>
  <div class="pass-wp">
    <div class="pass">
      <van-divider contentPosition="center">修改密码</van-divider>
      <van-cell-group>
        <van-field label="旧密码" v-model="data.loginkey" placeholder="请输入旧密码" :border="false" />
        <van-field label="新密码" v-model="data.loginPass" placeholder="请输入新密码" :border="false" />
      </van-cell-group>
      <div class="buttons">
        <van-button type="primary" @click="submitClk">确认修改</van-button>
        <van-button type="default" @click="hidePass">取消修改</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import "@/css/main.css";
import { mapGetters, mapActions } from "vuex";
import { Toast, Notify } from "vant";
export default {
  data() {
    return {
      data: {}
    };
  },
  methods: {
    ...mapActions("login", ["upPass", "resetToken"]),
    submitClk() {
      if (!this.data.loginkey) {
        Toast("旧密码不得为空");
        return;
      }
      if (this.user.loginKey != this.data.loginkey) {
        Toast("旧密码不正确");
        return;
      }
      if (!this.data.loginPass) {
        Toast("旧密码不得为空");
        return;
      }
      if (this.user.loginKey == this.data.loginPass) {
        Toast("新密码不得与旧密码相等");
        return;
      }
      let data = {
        loginKey: this.data.loginPass,
        id: this.user.id
      };
      this.upPass(data);
      Notify({ type: "success", message: "恭喜您修改成功" });
      this.resetToken();
      this.$router.push("/login");
    },
    hidePass() {
      this.$parent.hidePass();
    }
  },
  components: {
    vanToast: Toast,
    vanNotify: Notify
  },
  computed: {
    ...mapGetters(["user"])
  }
};
</script>

<style scoped>
.pass-wp {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}

.pass >>> .van-divider {
  font-size: 0.4rem;
}

.pass {
  width: 6rem;
  height: 4rem;
  background: #fff;
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translate(-50%);
}

.buttons {
  padding: 0.2rem;
  display: flex;
  justify-content: space-around;
}
</style>